import React from 'react';
import {connect} from 'react-redux';
import {addToCart,reduceNum,totalPay} from './../action/product';
var _ = require('lodash');
class CartsContext extends React.Component{
    //+
    add(e){
        e.stopPropagation();
        let idx=parseInt(e.currentTarget.getAttribute('data-idx'));
        let addToCartProduct=_.uniqWith(this.props.carts,_.isEqual)[idx];
        console.log(addToCartProduct)
        this.props.addToCart(addToCartProduct);
        this.props.totalPay();
    }
    //-
    reduce(e){
        e.stopPropagation();
        let idx=parseInt(e.currentTarget.getAttribute('data-idx'));
        let addToCartProduct=_.uniqWith(this.props.carts,_.isEqual)[idx];
        this.props.reduceNum(addToCartProduct);
        this.props.totalPay();
    }
    render(){
        const {carts,total} = this.props;
        var cls = _.uniqWith(carts,_.isEqual);
        var output = [];
        for(let i=0;i<cls.length;i++){
            output.push(
                 <tr key={i}>
                     <td style={{width:270+'px'}}><img src={cls[i].picurl} className="image"/></td>
                    <td>
                        <div><strong>{cls[i].productname}</strong>
                        </div>
                    </td>
                    <td>
                        <button className="numbtn" data-idx={i} onClick={(e)=>this.add(e)}>+</button>
                        {cls[i].quantity}
                        <button className="numbtn" data-idx={i} onClick={(e)=>this.reduce(e)}>-</button>
                    </td>
                    <td>&yen;{cls[i].unitprice}</td>
                    <td>&yen;{cls[i].quantity*cls[i].unitprice}</td>
                </tr>
            )
        }

        var style={
            goodsList:{
                marginTop:"20px"
            }
        }
        return (
            <div>

                <div className="table-responsive m-t">
                <table className="table invoice-table" style={style.goodsList}>
                    <thead>
                        <tr>
                            <td>产品列表</td>
                            <td>产品名称</td>
                            <td>数量</td>
                            <td>单价</td>
                            <td>总价</td>
                        </tr>
                    </thead>
                    <tbody>
                        {output}
                    </tbody>
                    </table>
                </div>

                <table className="table invoice-total">
                <tbody>
                    <tr>
                        <td><strong>总计</strong>
                        </td>
                        <td>&yen;{total}</td>
                    </tr>
                </tbody>
                </table>
                    <div className="text-right">
                    <button className="btn btn-primary"><i className="fa fa-dollar"></i> 去付款</button>
                </div>

                <div className="well m-t"><strong>注意：</strong> 请在30日内完成付款，否则订单会自动取消。
                </div>
            </div>
        )
    }
}

const getValue = (state)=>{
    //console.log(state)
    return {
        carts:state.product.carts,
        total:state.product.total
    }
}

const Carts = connect(getValue,{addToCart,reduceNum,totalPay})(CartsContext);

module.exports=Carts;